<template>
    <div>
    <el-dialog
        title="图书信息编辑修改"
        v-model="dialogFormVisible"
        :before-close="clear"
        width=30%
        >  
        <el-form v-model="form" style="text-align: left" ref="form">
          <el-form-item label="ID" :label-width="formLabelWidth" prop="id">
            <el-input name="id" type="text" v-model="form.id" readonly disabled></el-input>
          </el-form-item>  
           <el-form-item label="图书名" :label-width="formLabelWidth" prop="bookName">
            <el-input type="text" name="bookName" v-model="form.bookName" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="图书类型" :label-width="formLabelWidth" prop="bookType">
          <el-select v-model="form.bookType" placeholder="请选择图书类型">
            <el-option
              v-for="type in bookTypes"
              :key="type.bookType"
              :label="type.bookType"
              :value="type.bookType">
            </el-option>
          </el-select>
        </el-form-item>

           <el-form-item label="作者名" :label-width="formLabelWidth" prop="author">
            <el-input type="text" name="author" v-model="form.author" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">        
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit">确 定</el-button>
        </div>     
      </el-dialog>
    </div>
  </template>
  <script>
  export default {
      name: 'editBook',
      components:{},
      data () {
        return {
          dialogFormVisible: false,        
          form: {
             id:'',                 
             bookName:'',
             bookType:'', 
             author:'',                  
          },
          formLabelWidth: '80px',  
          bookTypes: [],
        }
      },
      methods: {
        clear () {       
          this.form = {
            id:'',   
            bookName:'',
            bookType:'', 
            author:'',                          
          }
        },   
        getAllBookTypes(){
          this.$api.post('bookType/getAllBookType', null).then((res) => {                        
            if (res.code === 200) {     
            this.bookTypes = res.data.sort((a, b) => a.id - b.id);
        } else {
          alert('获取图书类型数据失败!')
        }
        })    
        }, 
        onSubmit () {   
            var _this = this              
            let data = {
                id: this.form.id,
                bookName: this.form.bookName,
                bookType: this.form.bookType,
                author: this.form.author
            }                    
            this.$api.post('book/updateBook', data)
                        .then((res) => {                        
                            if (res.code === 200) {
                                this.$emit("onReload")
                                this.dialogFormVisible = false
                            } else {
                                this.$message({
                                    type: 'info',
                                    message: '修改图书信息失败'
                                });   
                            }        
                        })  
        }
      },
      mounted(){
      this.getAllBookTypes();
    },
   } 
  </script>
  
  <style scoped>
    .el-icon-circle-plus-outline {
      margin: 50px 0 0 20px;
      font-size: 100px;
      float: left;
      cursor: pointer;
    } 
  
  </style>